<template>
  <transition name="slide">
    <musiclist :rank="rank"  :title="title" :bgImage="bgImage" :songs="listDetail"></musiclist>
  </transition>
</template>
<script>
import musiclist from "@/components/music-list/music-list";
import { mapGetters } from "vuex";
import { getRanksTopDetail } from "@/api/rank";
import { ERR_OK } from "@/api/config";
import { createHotSong } from "@/common/js/SongObject";
import { getMusicVkey } from "@/api/Singer";
export default {
  data() {
    return {
      listDetail: [] ,//榜单歌单的详情
      rank : true,//展示前三名的冠军样式
    };
  },
  components: {
    musiclist
  },
  computed: {
    title() {
      return this.RankTopList.title;
    },
    bgImage() {
      return this.RankTopList.mbFrontPicUrl;
    },
    ...mapGetters(["RankTopList"])
  },
  created() {
    this._initTopList(this.RankTopList.topId, this.RankTopList.period);
  },
  methods: {
    _initTopList(topId, period) {
        if(!topId || !period){
            this.$router.push('/rank')
        }
      getRanksTopDetail(topId, period).then(res => {
        if (res.code === ERR_OK) {
          this.listDetail = this._normalrizeTopList(
            res.detail.data.songInfoList
          );
        }
      });
    },
    //处理歌单数据
    _normalrizeTopList(list) {
      let ret = [];
      list.forEach(item => {
        let playUrl = "";
        getMusicVkey(item.mid).then(res => {
          let Data = res.req_0;
          if (Data.code === ERR_OK) {
            playUrl = Data.data.midurlinfo[0].purl;
            if (item.id && item.album.id) {
              const newSong = createHotSong(item, playUrl);
              ret.push(newSong);
            }
          }
        });
      });
      return ret;
    }
  }
};
</script>
<style lang="stylus">
@import '../../common/stylus/variable.styl';

.singer_detail {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  background: $color-background;
}

// 动画
.slide-enter-active, .slide-leave-active {
  transition: all 0.3s;
}

.slide-enter, .slide-leave-to {
  transform: translate3d(100%, 0, 0);
}
</style>